<template>
	<view>
		<u-navbar title="个人签到" leftIconColor='#fff' titleStyle='color:#fff;' bgColor='transparent' :autoBack="true">
		</u-navbar>
		<view class="header" :style="{height:`calc(546rpx + ${statush} - 41rpx)`}">
			<image class="headerbg" src="/pages/my/static/signbg.png" mode=""></image>
			<view class="centerbox">
				<view class="ct">
					-已连续签到-
				</view>
				<view class="allday">
					<text style="font-size: 67rpx;line-height: 44rpx;">{{info.keepSign}}</text><text
						style="font-size: 34rpx;line-height: 30rpx;">天</text>
				</view>
				<view class="btn" @click="clicksign" v-if="!info.issign">
					点击签到
				</view>
				<view class="btn" @click="clicksign" v-else>
					完成签到
				</view>
			</view>
			<view class="jfbox">
				<view class="item">
					<view class="num">
						{{info.scoreB}}
					</view>
					<view class="type">
						获得积分
					</view>
				</view>
				<view class="line">

				</view>
				<view class="item">
					<view class="num">
						{{info.count}}
					</view>
					<view class="type">
						签到天数
					</view>
				</view>
			</view>
		</view>
		<view class="daylist">
			<view class="daytop">
				<image class="topicon" src="/static/img/my/up.png" mode="" @click="up"></image>
				<view style="color: #333333;font-size: 32rpx;margin: 0 62rpx;">
					{{dateY}}年{{dateM}}月
				</view>
				<image class="topicon" src="/static/img/my/down.png" mode="" @click="down"></image>
			</view>
			<view class="daybox">
				<view class="week flex">
					<view class="weekitem" v-for="(item,index) in weeklist" :key="index">
						{{item}}
					</view>
				</view>
				<view class="daylistbox">
					<view class="daylistitem flex" v-for="(item,index) in date_list" :key="index">
						<view class="dayitem" v-for="(i,n) in item" :key="n">
							<view :class="i.className" v-if="i">
								{{i.number}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let getMothList = (year, month) => {
		var star = new Date(Date.UTC(year, month - 1, 1)).getDay()
		let mn = getMothNum(year)[month - 1]
		var res = []
		var row = []
		new Array(6 * 7)
			.fill('')
			.map((_, i) => i - star + 1)
			.map(e =>
				(e > 0 && e <= mn) ?
				({
					date: `${year}/${month<10?'0'+month:month}/${e<10?'0'+e:e}`,
					number: e
				}) :
				(null)
			)
			.forEach((item, i) => {
				row.push(JSON.parse(JSON.stringify(item)))
				if ((i + 1) % 7 == 0) {
					if (row.map(e => e || '').join('') !== '') {
						res.push(row)
						row = []
					}

				}
			})
		return res
	}
	var getMaxY = y => Boolean(
		y % 4 == 0 && y % 100 != 0 || y % 400 == 0
	)
	var getAugNum = n => getMaxY(n) ? 29 : 28
	// --获取年对应的月份
	var getMothNum = y => ([31, getAugNum(y), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31])
	var mothZh = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二'].map(e => e + '月')
	import {
		getSign,
		signReward
	} from '@/api/my.js'
	export default {
		data() {
			return {
				statush: '0px',
				dateY: '',
				dateM: '',
				date_list: [],
				weeklist: ['日', '一', '二', '三', '四', '五', '六'],
				info: {}
			};
		},
		onLoad() {
			getSign().then(res => {
				// console.log(res)
				this.info = res.data.data
				let year = (new Date()).getFullYear()
				let month = (new Date()).getMonth() + 1
				this.setDate(year, month)
			})
			this.statush = uni.getSystemInfoSync().statusBarHeight + 'px'


		},
		methods: {
			up(e) {
				if (this.dateM > 1) {
					var dateM = this.dateM
					var dateY = this.dateY
					this.setDate(dateY, dateM - 1)
				} else {
					var dateY = this.dateY
					this.setDate(dateY - 1, 12)
				}
			},
			down(e) {
				if (this.dateM < 12) {
					var dateM = this.dateM
					var dateY = this.dateY
					this.setDate(dateY, dateM + 1)
				} else {
					var dateY = this.dateY
					this.setDate(dateY + 1, 1)
				}
			},
			setDate(dateY, dateM) {
				// var date_list = getMothList(dateY, dateM)
				// this.date_list = date_list
				this.dateM = dateM
				this.dateY = dateY
				// 获取月和修改的时候，获取签到列表
				var signList=this.info.signList.map(t=>{
					return uni.$u.timeFormat(t.signtime, 'yyyy/mm/dd')
				})
				var chckin_list=signList.join(',')
				// console.log(signList)
				this.date_list=getMothList(dateY, dateM)
				.map(e => !e ? e : e.map(day => {
					return !day ? day : {
						...day,
						className: chckin_list.indexOf(day.date) != -1 ? 'checkin' : '',
					}
					// console.log(chckin_list.indexOf('2022/10/1'))
				}))
				
				console.log(this.date_list,chckin_list)
			},
			clicksign() {
				if(this.info.issign){
					uni.showToast({
						title:'今日已完成签到。请明日继续',
						icon:'none'
					})
					return
				}
				signReward().then(res => {
					if (res.data.code == 1) {
						uni.showToast({
							title: '签到成功',
							icon: 'none'
						})
						setTimeout(() => {
							getSign().then(res => {
								// console.log(res)
								this.info = res.data.data
								let year = (new Date()).getFullYear()
								let month = (new Date()).getMonth() + 1
								this.setDate(year, month)
							})
						}, 1000)
					}

				})
			}
		}
	}
</script>

<style lang="less">
	.header {
		width: 750rpx;
		height: 546rpx;
		position: relative;
		background-color: #ff8218;

		.headerbg {
			width: 750rpx;
			height: 546rpx;
			position: absolute;
			bottom: 0;
		}

		.centerbox {
			position: absolute;
			text-align: center;
			color: #FFFFFF;
			font-size: 24rpx;
			bottom: 141rpx;
			left: 293rpx;

			.allday {
				margin: 16rpx 0 24rpx;
				font-weight: bold;
				display: flex;
				align-items: flex-end;
				justify-content: center;
			}

			.btn {
				padding: 0 34rpx;
				line-height: 56rpx;
				background: #FFECC1;
				box-shadow: 1rpx 2rpx 21rpx 0px rgba(214, 90, 4, 0.44);
				border-radius: 28rpx;
				color: #8F7742;
				font-size: 28rpx;

			}
		}
	}

	.jfbox {
		width: 692rpx;
		height: 190rpx;
		background: #FFFFFF;
		box-shadow: 0px 6rpx 24rpx 0px rgba(236, 101, 84, 0.16);
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		bottom: -100rpx;
		left: 29rpx;

		.item {
			text-align: center;

			.num {
				color: #333333;
				font-size: 55rpx;
				font-weight: bold;
			}

			.type {
				color: #333333;
				font-size: 30rpx;
				color: rgba(51, 51, 51, .6);
				margin-top: 18rpx;
			}
		}

		.line {
			width: 2rpx;
			height: 63rpx;
			background-color: #EFEFEF;
			opacity: 0.5;
			margin: 0 110rpx;
		}
	}

	.daylist {
		padding: 98rpx 18rpx 0 28rpx;

		.daytop {
			padding: 43rpx 0 18rpx;
			border-bottom: 1px solid #EFEFEF;
			display: flex;
			align-items: center;
			justify-content: center;

			.topicon {
				width: 15rpx;
				height: 21rpx;
			}

		}
	}

	.daybox {
		padding: 54rpx 59rpx;

		.week {
			justify-content: space-between;
			color: #333333;
			font-size: 24rpx;
			margin-bottom: 29rpx;

			.weekitem {
				width: 36rpx;
				height: 36rpx;
				text-align: center;

			}
		}
	}

	.daylistitem {
		justify-content: space-between;
		margin-bottom: 22rpx;
	}

	.dayitem {
		width: 36rpx;
		height: 36rpx;
		text-align: center;
		font-size: 28rpx;
		color: #999999;
		.checkin{
			background-color: rgba(252, 162, 53, .1);
			color:#FCA235;
			border-radius: 50%;
		}
	}
</style>
